<!--
 * 诗词展示
 * @Author: xurenda <xurenda@qq.com>
 * @HomePage: https://xurenda.top
 * @Github: https://github.com/xurenda
 * @Date: 2019-12-06 21:56:12
 * @LastEditTime: 2019-12-06 22:23:46
 * @FilePath: \elegant-surf\src\components\home\Poetry.vue
 -->
<template>
<div id="poetry">
  <div class="content">{{ content }}</div>
  <div class="origin">{{ author }}《{{ title }}》</div>
</div>
</template>

<script>
import poetry from '@/assets/js/poetry'

export default {
  name: 'poetry',
  data() {
    return {
      title: '木兰花令·拟古决绝词', // 标题
      author: '纳兰性德', // 诗人
      content: '人生若只如初见，何事秋风悲画扇？' // 诗词内容
    }
  },
  async mounted() {
    // 获取诗词
    const { title, author, content } = await poetry()
    this.title = title
    this.author = author
    this.content = content
  }
}
</script>

<style lang="stylus">
#poetry
  width 80vw
  text-align center
  .content
    font-size calc(25px + 1vw)
  .origin
    margin-top .6em
    font-size calc(12px + 1vw)
    transform translateX(10%)
</style>